<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>店铺管理</el-breadcrumb-item>
      <el-breadcrumb-item>店铺列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getGoodsList">
            <el-button slot="append" icon="el-icon-search" @click="getGoodsList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 店铺列表区域 -->
      <el-table :data="goodsList" style="width: 100%" border stripe>
        <el-table-column type="index" label="#">
        </el-table-column>
				<el-table-column prop="goods_imgs" label="店铺图片" width="120">
					<template slot-scope="scope">
					  <img :src=" api_url + scope.row.store_banner[0] " width="80px" height="80px" />
					</template>
				</el-table-column>
        <el-table-column prop="store_name" label="店铺名称" width="150">
        </el-table-column>
				<el-table-column prop="store_intro" label="简介">
				</el-table-column>
        <el-table-column prop="send_address" label="收货地址" width="95">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="140">
          <template slot-scope="scope">
            {{ scope.row.add_time | dataFormat }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="130">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeById(scope.row._id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 50]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
        :total="total" background>
      </el-pagination>

    </el-card>

  </div>
</template>

<script>
export default {
  data () {
		// 验证价格的规则
		var checkPrice = (rule, value, callback) => {
			// 验证价格
			if (value >= 0) {
				return callback()
			}
			callback(new Error('数值不能小于0'))
		}
    return {
			api_url: this.$api_url,
      // 获取商品列表的参数对象
      queryInfo: {
        query: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 10
      },
      total: 0,
      goodsList: []
    }
  },
  created () {
    // 获取所有商品列表
    this.getGoodsList()
  },
  methods: {
    // 根据分页获取对应的商品列表
    async getGoodsList () {
      const { data: res } = await this.$http.get('stores', {
        params: this.queryInfo
      })
			console.log(res);
      if (res.code !== 200) return this.$message.error(res.msg)
      this.$message.success(res.msg)
      this.goodsList = res.data.data;
      this.total = res.data.total;
    },
    // 监听pagesize改变的事件
    handleSizeChange (newSize) {
      // console.log('pagesize:' + newSize)
      this.queryInfo.pagesize = newSize
      this.getGoodsList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      // console.log('pagenum:' + newPage)
      this.queryInfo.pagenum = newPage
      this.getGoodsList()
    },
    // 删除商品
    async removeById (id) {
			console.log(id);
      const confirmResult = await this.$confirm('此操作将永久删除该店铺, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)

      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除！')
      }

      const { data: res } = await this.$http.delete('stores/' + id)
			console.log(res);
      if (res.code !== 200) {
        return this.$message.error(res.msg)
      }
      this.$message.success(res.msg)
      this.getGoodsList()
    }
  }
}
</script>

<style lang="less" scoped>
	/deep/ .avatar-uploader .el-upload {
	    border: 1px dashed #d9d9d9;
	    border-radius: 6px;
	    cursor: pointer;
	    // position: relative;
	    overflow: hidden;
	  }
		.avatar-uploader {
			width: 90px;
			// display: block;
		}
	  .avatar-uploader .el-upload:hover {
	    border-color: #409EFF;
	  }
	  .avatar-uploader-icon {
	    font-size: 28px;
	    color: #8c939d;
	    width: 60px;
	    height: 60px;
	    line-height: 60px;
	    text-align: center;
	  }
	  .avatar {
	    width: 80px;
	    // height: 60px;
			margin-right: 10px;
	    // display: block;
	  }
		/deep/ .el-form-item__content {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			box-sizing: border-box;
		}
		/deep/ .el-upload-list__item {
			width: 100px; 
			float: left;
			margin-right: 10px;
		}
</style>
